<template>
    <div class="dashboard-head">
        <div class="dashboard-header">
            <div class="dashboard-header-nowDate">
                <div class="nowDate">
                    {{ nowDate }}
                </div>
                <div class="nowWeek">
                    {{ nowWeek }}
                </div>
                <div class="nowTime fs24">
                    {{ nowTime }}
                </div>
            </div>
            <div class="dashboard-header-center">
                <div class="dashboard-header-title fs24">
                    <span>国际眼科中心智慧后勤运营平台</span>
                </div>
            </div>
            <div class="right">
                <div class="dashboard-header-admin">

                    <AdminDropDown></AdminDropDown>
                </div>
            </div>
        </div>
        <!-- 按钮组 -->
        <div class="dashboard-btnGroup" v-if="route.name != 'home'" style="z-index: 99;">
            <transition appear name="custom-classes-transition"
                enter-active-class="animate__animated animate__faster  animate__backInUp "
                leave-active-class="animate__animated animate__faster animate__backInUp ">
                <div class="dashboard-btnGroup-btns">
                    <div class="btn-item" v-for="(item, index) in btnGroupData" @click="">
                        <router-link :to="item.routerName">
                            <img :src="item.routerName == nowrouterName ? item.nowSrc : item.imgSrc" alt="">
                        </router-link>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script setup lang="ts">
import { requireImgUrl } from '@/utils/localurl/metaUrl'
import { ref, onMounted, toRefs, watch, watchEffect, computed } from 'vue';
import catchTime from '../../utils/dateTime';
import { useCatchTimeStore } from '../../stores/catchTime';
import { useRoute, useRouter } from 'vue-router';
import { commonApi, smartAccess } from '@/api/common'
const { time } = toRefs(useCatchTimeStore())
const route = useRoute()
const router = useRouter()
const nowTime = ref('');
const nowDate = ref('');
const nowWeek = ref('');

const headerBtnStyle = computed(() => {
    return `width:${118 * (innerWidth / 1920)}px;heihgt:${38 * (innerHeight / 1080)}px`
})

const headerBtnStyleBig = computed(() => {
    return `width:${146 * (innerWidth / 1920)}px;heihgt:${38 * (innerHeight / 1080)}px`
})

// let nowrouterName = route.name;//当前路由名称
const nowrouterName = ref(route.name);

const btnGroupData = [{
    routerName: 'smartAccess',
    imgSrc: requireImgUrl('headerImages/btn', 'pass_btn'),
    nowSrc: requireImgUrl('headerImages/Selected_btn', 'pass_now')
}, {
    routerName: 'comprehensiveSituation',
    imgSrc: requireImgUrl('headerImages/btn', 'situation_btn'),
    nowSrc: requireImgUrl('headerImages/Selected_btn', 'situation_now')
}, {
    routerName: 'smartSecurity',
    imgSrc: requireImgUrl('headerImages/btn', 'security_btn'),
    nowSrc: requireImgUrl('headerImages/Selected_btn', 'security_now')
}];
watchEffect(async () => {
    if (route.name == 'smartAccess') {//智慧通行
        let res = await smartAccess({
            eventName: '智慧停车视角',
            toguys: 'thingjs',
        })
    }

    if (route.name == 'comprehensiveSituation') {//综合态势，  切换到二层
        // let res = await floorSpace({
        //     eventName: 'floorSpace',
        //     toguys: 'thingjs',
        // })
        // let info = {
        //     eventName: '视角到2F',
        //     toguys: 'thingjs',
        // }
        // let res = await visualTo2F(info);

    }
    if (route.name == 'smartSecurity') {//智慧安防，  切换到二层
        // let res = await floorSpace({
        //     eventName: 'floorSpace',
        //     toguys: 'thingjs',
        // })

    }
    btnGroupData.forEach((item) => {//当前路由名称高亮按钮
        if (item.routerName == route.name) {
            nowrouterName.value = item.routerName;
            console.log(nowrouterName);

        }
    })
})

onMounted(() => {
    let { date, week } = catchTime.init()
    nowDate.value = date;
    nowWeek.value = week;
    catchTime.hearTime()
});

watch(() => time.value, (newVal) => {
    nowTime.value = newVal
},
    {
        immediate: true,
        deep: true
    });


const change3dAnimate = (i: number) => {
    commonApi({ toguys: 'thingjs', data: {}, eventName: 'default' }).then(res => {
        console.log(res);

    })
}
</script>

<style scoped lang="scss">
.dashboard-header {
    width: 100%;
    height: 6vh;
    background: url("../../assets/headerImages/header.gif") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 999;
    top: 0;

    .dashboard-header-center {
        display: flex;
    }

    .dashboard-header-nowDate {
        flex: 1;
        display: flex;
        font-weight: 400;
        line-height: 14px;
        height: 18px;
        margin-left: 25px;
        color: #FFFFFF;

        & div {
            margin-left: 16px;
        }

        .nowTime {
            margin-left: 28px;
        }
    }

    .right {
        display: flex;
        justify-content: right;
        flex: 1;

        .dashboard-header-admin {
            display: flex;
            width: 21vw;
            justify-content: right;

            .dashboard-admin-index {
                display: flex;
                align-items: center;
                cursor: pointer;
                width: 120px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }

    .dashboard-header-title {
        margin-right: 5px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        line-height: 28px;
        letter-spacing: 1px;
        background: linear-gradient(180deg, #2D71F6 0%, #40DDFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    // .header-toolbar {
    //     display: flex;

    //     align-items: center;
    //     font-size: 14px;
    //     height: 48px;
    //     line-height: 48px;
    //     position: absolute;
    //     right: 0px;
    //     top: 0px;
    //     flex: 1;

    //     .svg-icon {
    //         padding: 0 6px 0 18px;
    //     }

    //     :deep(.avatar-container) {
    //         .svg-icon {
    //             padding: 0 6px 0 18px;
    //         }

    //         .avatar-wrapper {
    //             color: #fefefe;
    //         }
    //     }
    // }
}

.dashboard-head {
    width: 100%;
    height: 6vh;
    z-index: 9;

    .dashboard-btnGroup {
        width: max-content;
        height: 50px;
        position: absolute;
        top: 80px;
        left: 50%;
        transform: translateX(-50%);

        .btn-item {
            margin: 0px 1px;
            // border: 1px solid;
            display: inline-block;
        }
    }
}
</style>
